<template>
    <el-dialog title="图片剪裁" class="crop-pic-dialog" :visible.sync="dialogVisible" width="600px" append-to-body :close-on-click-modal="false">
        <div class="cropper-content">
            <div class="cropper" style="text-align:center">
                <vue-cropper ref="cropperUI" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :enlarge="option.enlarge" mode="cover" :high="true" :centerBox="option.centerBox" :maxImgSize="option.maxImgSize" :infoTrue="option.infoTrue"></vue-cropper>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="_onCloseDialog">取 消</el-button>
            <el-button v-show="isOriginal" type="primary" :loading="loading" @click="_onOriginalClick">使用原图</el-button>
            <el-button type="primary" :loading="loading" @click="finish">裁剪</el-button>
        </div>
    </el-dialog>
</template>

<script>

import $file from './file';
import { VueCropper } from 'vue-cropper'
// import { mapMutations } from 'vuex'

export default {
    name: 'crop-pic',
    components: {
        VueCropper
    },
    props: {
        cropInfo: {
            type: Object, default() {
                return {
                    autoCropWidth: 200,//裁剪框的宽度
                    autoCropHeight: 200,//裁剪框的高度
                    enlarge: 1,//裁剪出来的图片是裁剪框的倍数
                    isShowSize: false,//是否显示尺寸
                }
            }
        },
    },
    watch: {
        cropInfo: {
            handler() {
                let { autoCropWidth, autoCropHeight, enlarge } = this.cropInfo || {}
                // 设置宽度
                this.option.autoCropWidth = parseInt(autoCropWidth)
                // 设置高度
                this.option.autoCropHeight = parseInt(autoCropHeight)
                // 设置倍数
                this.option.fixedNumber = [this.option.autoCropWidth, this.option.autoCropHeight]
                this.option.enlarge = enlarge
            }, immediate: true, deep: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            // 裁剪组件的基础配置option
            option: {
                // img: '', // 裁剪图片的地址
                // info: true, // 裁剪框的大小信息
                // outputSize: 0.8, // 裁剪生成图片的质量
                // outputType: 'jpeg', // 裁剪生成图片的格式
                // canScale: true, // 图片是否允许滚轮缩放
                // autoCrop: true, // 是否默认生成截图框
                // autoCropWidth: 300, // 默认生成截图框宽度
                // autoCropHeight: 200, // 默认生成截图框高度
                // fixedBox: true, // 固定截图框大小 不允许改变
                // fixed: true, // 是否开启截图框宽高固定比例
                // fixedNumber: [7, 5], // 截图框的宽高比例
                // full: true, // 是否输出原图比例的截图
                // canMoveBox: true, // 截图框能否拖动
                // original: false, // 上传图片按照原始比例渲染
                // centerBox: false, // 截图框是否被限制在图片里面
                // infoTrue: false // true 为展示真实输出图片宽高 false 展示看到的截图框宽高

                img: '',
                size: 1,
                outputSize: 1, // 剪切后的图片质量（0.1-1）
                full: false, // 输出原图比例截图 props名full
                outputType: 'png',
                canMove: true,
                original: false,
                canMoveBox: false,
                autoCrop: true,
                autoCropWidth: this.cropInfo.autoCropWidth,
                autoCropHeight: this.cropInfo.autoCropHeight,
                fixedBox: true,
                fixed: false,
                enlarge: this.cropInfo.enlarge,
                centerBox: true,
                maxImgSize: 3000, // 图片最大像素
                fixedNumber: [this.cropInfo.autoCropWidth, this.cropInfo.autoCropHeight],
                // fixedNumber: [1, 1],
                infoTrue: false,
                info: this.cropInfo.isShowSize, // 裁剪框的大小信息
            },
            picsList: [],  //页面显示的数组
            // 防止重复提交
            loading: false,
            target: undefined,//原文件的对象信息
            resolve: undefined,
            isOriginal: false,//是否使用原图
            croppedCoverUrl: ''
        }
    },

    methods: {
        //使用原图
        _onOriginalClick() {
            this.dialogVisible = false
            this.resolve && this.resolve()
        },

        finish() {
            // console.log('尺寸', this.option.autoCropWidth, this.option.autoCropHeight, this.option);
            this.$refs.cropperUI.getCropData(data => {
                let { autoCropWidth, autoCropHeight } = this.option || {}
                var img = new Image(autoCropWidth, autoCropHeight); //创建img
                img.src = data; //路径
                let { name, fileName } = this.target || {}
                // 把bse64转换成file文件
                $file.base642File(data, name || fileName, Date.now()).then((file) => {
                    // file.width = img.width
                    // file.height = img.height
                    this.dialogVisible = false
                    this.resolve && this.resolve(file)
                }).catch(() => {
                    // 将 base64 转换为 File 失败
                    this.$notify.warning("base64 转换为 File 失败")
                })
            })
        },

        _onCloseDialog() {
            this.dialogVisible = false
        },

        show(url, target) {
            this.target = target
            let { autoCropWidth, autoCropHeight, enlarge } = this.cropInfo;
            let { width, height } = target || {}
            if (autoCropWidth * enlarge == width && autoCropHeight == height) {
                this.isOriginal = true
            }

            this.$nextTick(() => {
                this.dialogVisible = true
                this.option.img = url
                // this.option.img = "https://seopic.699pic.com/photo/40114/8568.jpg_wh1200.jpg"
                // this.option.img = "/api/aosa/file/download?fileUUID=06b80e6f4edc448e9617e97dd475c2ef&businessEnum=material"
                // this.option.img = url.split(":")[1] 
            })
            return new Promise((resolve, reject) => {
                this.resolve = resolve;
                this.reject = reject
            })
        },

        /**
         * @param {File} file
         */
        show2(file) {
            return new Promise((resolve, reject) => {
                $file.blob2Base64(file).then((bass64) => {
                    this.show(bass64, file).then((data) => {
                        // 图片文件
                        resolve(data);
                    }).catch(reject);
                }).catch(reject);
            })

        }
    }

}
</script>

<style lang="scss" scoped>
.crop-pic-dialog {
    // 截图
    .cropper-content {
        .cropper {
            width: auto;
            height: 400px;
        }
    }
}
</style>